<template>
    <footer class="bg-gray-900 text-white">
        <!-- 主要页脚内容 -->
        <div class="container mx-auto px-6 pt-10 pb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- 公司信息 -->
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img width="50" height="50" src="/images/csverse.png" alt="消防资讯网" class="mr-3" />
                        <span class="text-2xl font-bold text-red-500">消防资讯网</span>
                    </div>
                    <p class="text-gray-400 mb-4">全网最全消防设备厂商黄页<br />提供可靠消防信息自1992年以来</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <!-- 快速链接 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-white">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="/" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="/products" class="text-gray-400 hover:text-white transition-colors">产品中心</a></li>
                        <li><a href="/factory" class="text-gray-400 hover:text-white transition-colors">厂家目录</a></li>
                        <li><a href="/about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <!-- 消防产品 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-white">消防产品</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">消防报警系统</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">灭火设备</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">消防水系统</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">防火材料</a></li>
                    </ul>
                </div>
                
                <!-- 联系我们 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-white">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 mr-2 mt-0.5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 mr-2 mt-0.5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                            <span>contact@firefighting.com</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 mr-2 mt-0.5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span>北京市朝阳区消防产业园B座501</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="bg-gray-950 py-4">
            <div class="container mx-auto px-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-gray-500 text-sm mb-2 md:mb-0">
                        © 2024 消防资讯网. 保留所有权利
                    </div>
                    <div class="flex space-x-6 text-sm">
                        <a href="#" class="text-gray-500 hover:text-white">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white">使用条款</a>
                        <a href="#" class="text-gray-500 hover:text-white">网站地图</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</template>

<style scoped>
footer a {
    transition: color 0.2s ease-in-out;
}
</style>